<template>
  <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
    <div id="erule-box" v-show="ruleshow">
      <div class="equipadd-box scrllor">
        <div class="add-box">
          <div class="title-box">
            <p style="float: left">公众号规则</p><span class="status-name" style="color: rgb(49, 209, 158);" @click="editRule('wx')">去编辑选中规则</span>
          </div>
          <div>
            <input type="text" class="my-input" readonly v-model="rule.gzh" @click="gzhShow=true" />
          </div>
        </div>
        <div class="add-box">
          <div class="title-box">
            <p style="float: left">卡规则</p><span class="status-name" style="color: rgb(49, 209, 158);" @click="editRule('card')">去编辑选中规则</span>
          </div>
          <div>
            <input type="text" class="my-input" readonly v-model="rule.card" @click="cardShow=true" />
          </div>
        </div>
      </div>
      <mu-button class="blur-btn btn fleft out-btn" @click="close" id="close">取消</mu-button>
      <mu-button class="blur-btn btn fright" @click="submit" id="submit">确定</mu-button>
      <van-popup v-model="gzhShow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="gzhList"
          @confirm="gzhChange"
          show-toolbar
          title="请选择公众号规则"

          cancel-button-text=" "
        />
      </van-popup>
      <van-popup v-model="cardShow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="cardList"
          @confirm="cardChange"
          show-toolbar

          title="请选择卡规则"
          cancel-button-text=" "
        />
      </van-popup>
    </div>
  </transition>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { Toast } from "vant";
import { Picker } from "vant";
import "vant/lib/popup/style/index";
import "vant/lib/picker/style/index";
Vue.use(Picker);
Vue.use(Popup);
export default {
  props: ["id",'wxrule','cardrule'],
  data() {
    return {
      ruleshow: false,
      gzhShow: false,
      cardShow: false,
      rule: {
        gzh: "",
        card: "",
        wxRuleId: this.wxrule,
        cardRuleId: this.cardrule
      },
      gzhList: [],
      cardList: [],
        num:10
    };
  },
  methods: {
      editRule(type){
        if(type==='wx'){
           if(this.rule.wxRuleId){
               this.$router.push({
                   path: "/admin/editrule/" + this.rule.wxRuleId
               });
           }else{
               Toast('请先选择规则')
           }
        }
        if(type==='card'){
            if(this.rule.cardRuleId){
                this.$router.push({
                    path: "/admin/editrule/" + this.rule.cardRuleId
                });
            }else{
                Toast('请先选择规则')
            }
        }
      },
    Showrulediv() {
      this.ruleshow = true;



    },
    data(wx,card){
      this.rule.wxRuleId=wx,
        this.rule.cardRuleId=card
        this.gzhList.forEach(e => {

        if(e.id ==wx)  this.rule.gzh =e.text
      });
    this.cardList.forEach(e => {

        if(e.id == card)  this.rule.card =e.text
      });

    },

    gzhChange(v) {
      this.rule.gzh = v.text;
      this.gzhShow = false;
      this.rule.wxRuleId = v.id;

    },
    cardChange(v) {
      this.rule.card = v.text;
      this.cardShow = false;
      this.rule.cardRuleId = v.id;
    },
    submit() {
      if (this.rule.gzh == "") {
        Toast("请选择公众规则");
        return;
      }
      if (this.rule.card == "") {
        Toast("请选择卡规则");
        return;
      }
      this.$api
        .setPileRule({
          Id: this.id,
          wxRuleId: this.rule.wxRuleId,
          cardRuleId: this.rule.cardRuleId
        })
        .then(res => {

            if(res.data.message.code==0){
                Toast("设置规则成功");
                this.$parent.getChargingList();
                this.ruleshow = false;
            }
        });
    },
    close() {
      this.ruleshow = false;
      this.rule.wxRuleId='';
        this.rule.cardRuleId='';
        this.rule.card ='';
        this.rule.gzh ='';

    }
  },
  mounted() {

    this.$api.getRuleList({ ruleType: 10002,pageNo:1,pageSize:this.num }).then(res => {

      let a = JSON.stringify(res.data).replace(/changeName/g, "text");

      let b = JSON.parse(a);

      this.gzhList = b.data.records;
    });
    this.$api.getRuleList({ ruleType: 10001,pageNo:1,pageSize:this.num }).then(res => {

      let a = JSON.stringify(res.data).replace(/changeName/g, "text");

      let b = JSON.parse(a);
      this.cardList = b.data.records;
    });
  }
};
</script>

<style lang="scss" scoped>
#erule-box {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(1, 12, 61, 1) 0%,
    rgba(25, 51, 98, 1) 100%,
    rgba(25, 51, 98, 1) 100%
  );
  position: absolute;
  z-index: 10;
  top: 0;
}
#close {
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background: rgba(30, 197, 241, 0.17);
}
#submit {
  width: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 0;
}
</style>
